<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	import GetCoupon from './getcoupon.vue'
	import GetUser from './getuser.vue'
	import marketApi from '@/api/zhitan/market.ts'

	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const formRules : any = ref({
		name: [{
			required: true,
			message: '请选择优惠券',
			trigger: 'blur',
		}],
		applet_user_name: [{
			required: true,
			message: '请选择小程序用户',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const total : any = ref(0)
	const showGetCoupon = ref(false)
	const showGetUser = ref(false)

	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})

	const dataList : any = ref([])// 表格
	const topIndex : any = ref(1)
	const topList : any = ref([
		{
			id: 1,
			name: '余额明细',
			value: 1,
			num: 10,
		},
		{
			id: 2,
			name: '使用记录',
			value: 2,
			num: 19,
		},
		{
			id: 3,
			name: '提现记录',
			value: 3,
			num: 5,
		},
		{
			id: 4,
			name: '设置',
			value: 4,
		},
	])
	onMounted(() => {
		getList()
	})
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}

	function getList() {
		marketApi.CouponLog_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function modify(row : any, type : any) {
		if (type === 1) {
			form.value = {
				status: 1,
				get_type: 1,
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		marketApi.CouponLog_delete({ id: row.id }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				form.value.send_time = Math.floor(Date.now() / 1000)
				form.value.end_time = form.value.send_time + form.value.day * 86400
				marketApi.CouponLog_edit(form.value).then((res : any) => {
					if (res.code === 0) {
						getList()
						dialogVisible.value = false
						ElMessage({
							type: 'success',
							message: '操作成功',
						})
					}
				})
			}
		})
	}
	function changedata(e : any) {
		form.value.name = e.name
		form.value.coupon_id = e.id
		form.value.image = e.id
		form.value.day = e.id
		form.value.money = e.id
		form.value.type = e.id
		form.value.product_group_id = e.id
		form.value.product_id = e.id
		form.value.remark = e.id


		showGetCoupon.value = false
	}
	function changedatauser(e : any) {
		form.value.applet_user_name = e.nick_name
		form.value.applet_user_id = e.id
		showGetUser.value = false
	}
</script>

<template>
	<div class="absolute-container">
		<!-- <PageHeader>
      <template #title>
        <div class="custom-style">
          <el-segmented v-model="topIndex" :options="topList" class="custom-style">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div>
                  <span>{{ item.name }}</span>
                  <span v-if="item.num">({{ item.num }})</span>
                </div>
              </div>
            </template>
          </el-segmented>
        </div>
      </template>
    </PageHeader> -->
		<PageMain style="position: relative;">
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<!-- <el-form-item label="优惠券名称:">
						<el-input v-model="paging.name" clearable placeholder="输入优惠券名称" @clear="paging.name = null" />
					</el-form-item> -->
					<el-form-item label="状态" style="width: 200px;">
						<el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
							<el-option label="未使用" value="1" />
							<el-option label="已使用" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="类型" style="width: 200px;">
						<el-select v-model="paging.type" clearable placeholder="请选择类型" @clear="paging.type = null">
							<el-option label="通用券" value="1" />
							<el-option label="品类券" value="2" />
							<el-option label="产品券" value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="获取途径" style="width: 200px;">
						<el-select v-model="paging.get_type" clearable placeholder="请选择获取途径"
							@clear="paging.get_type = null">
							<el-option label="新用户福利" value="1" />
							<el-option label="平台发放" value="2" />
							<el-option label="完成订单赠券" value="3" />
							<el-option label="约伴同行" value="4" />
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="起始时间:">
            <el-date-picker v-model="paging.date" type="daterange" clearable range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="x" @clear="paging.date = null" />
          </el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="getList()">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
                name: null,
              }, getList()">
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<div class="btnbox">
					<el-button type="primary" size="default" @click="modify(null, 1)">
						<template #icon>
							<svg-icon name="ep:plus" />
						</template>
						添加
					</el-button>
				</div>
			</div>
			<el-table :data="dataList" highlight-current-row border height="calc(100vh - 300px)">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<!-- <el-table-column prop="name" label="领取用户" min-width="200" align="left">
					<template #default="{ row: i }">
						<div class="aic flex">
							<div class="jcc aic flex">
								<image-preview
									:src="i.applet_user_info&&i.applet_user_info.avatar?i.applet_user_info.avatar:'1'"
									:width="34" :height="34" style="margin-right: 4px;" />
							</div>
							<div class="fdc ml-2 flex">
								<div>
									{{ i.applet_user_info&&i.applet_user_info.nick_name?i.applet_user_info.nick_name : '未知昵称' }}
								</div>
								<div>
									{{ i.applet_user_info&&i.applet_user_info.phone?i.applet_user_info.phone : '未授权手机号' }}
								</div>
							</div>
						</div>
					</template>
				</el-table-column> -->
				<el-table-column prop="name" label="发放用户" min-width="200">
					<template #default="{ row:i }">
						<div class="aic flex">
							<div class="jcc aic flex">
								<image-preview
									:src="i.applet_user_info&&i.applet_user_info.avatar?i.applet_user_info.avatar:'1'"
									:width="34" :height="34" style="margin-right: 4px;" />
							</div>
							<div class="fdc ml-2 flex">
								<div>
									{{i.applet_user_info&& i.applet_user_info.nick_name?i.applet_user_info.nick_name: '未知昵称' }}
								</div>
								<div>
									{{ i.applet_user_info&&i.applet_user_info.phone?i.applet_user_info.phone:  '未授权手机号' }}
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="is_top" label="优惠券" min-width="200" align="center">
					<template #default="{ row: i }">
						{{i.name || ''}}
					</template>
				</el-table-column>
				<el-table-column prop="type" label="优惠券类型" width="120" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.type===1">通用券</el-tag>
						<el-tag type="warning" v-if="i.type===2">品类券</el-tag>
						<el-tag type="primary" v-if="i.type===3">产品券</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="get_type" label="获取途径" width="100" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.get_type===1">新用户福利</el-tag>
						<el-tag type="warning" v-if="i.get_type===2">平台发放</el-tag>
						<el-tag type="primary" v-if="i.get_type===3">完成订单赠券</el-tag>
						<el-tag type="primary" v-if="i.get_type===4">约伴同行</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="money" label="优惠券减免金额" width="150" align="center">
					<template #default="{ row: i }">
						{{i.money/100}}
					</template>
				</el-table-column>
				<el-table-column prop="day" label="有效天数" width="100" align="center" />
				<el-table-column prop="money" label="产品分类" width="100" align="center">
					<template #default="{ row: i }">
						{{i.type===2&&i.product_group_info&& i.product_group_info.name?i.product_group_info.name:''}}
					</template>
				</el-table-column>

				<el-table-column prop="money" label="产品" width="100" align="center">
					<template #default="{ row: i }">
						{{i.type===3&&i.product_info&& i.product_info.name?i.product_info.name:''}}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.status===1">未使用</el-tag>
						<el-tag type="success" v-if="i.status===2">已使用</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="send_time" label="发放时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.send_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column prop="send_time" label="结束时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.end_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="120" align="center">
					<template #default="scope">
						<!-- <el-button type="primary" text @click="modify(scope.row, 2)">
							<template #icon>
								<svg-icon name="ep:edit" />
							</template>修改
						</el-button> -->
						<el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row)">
							<template #reference>
								<el-button type="danger" text>
									<template #icon>
										<svg-icon name="ep:delete" />
									</template>删除
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</PageMain>
		<HDialog v-model="dialogVisible" :title="form.id ? '优惠券发放' : '优惠券发放'" modulewidth="450px">
			<el-form ref="formRef" :model="form" class="px-2" :rules="formRules" label-position="top"
				label-width="100px">
				<el-form-item label="关联优惠券：" prop="name">
					<div @click="showGetCoupon = true" style="width:100%;">
						<el-input style="width:100%;" v-model="form.name" size="large" placeholder="请添加关联优惠券"
							clearable />
					</div>
				</el-form-item>
				<el-form-item label="关联用户：" prop="applet_user_name">
					<div @click="showGetUser = true" style="width:100%;">
						<el-input style="width:100%;" v-model="form.applet_user_name" size="large" placeholder="请添加关联用户"
							clearable />
					</div>
				</el-form-item>

				<el-form-item label="获取途径：" prop="get_type">
					<el-radio-group v-model="form.get_type">
						<el-radio :value="1">
							新用户发放
						</el-radio>
						<el-radio :value="2">
							平台发放
						</el-radio>
						<el-radio :value="3">
							完成订单
						</el-radio>
						<el-radio :value="4">
							拼团
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item label="分类状态：" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :value="1">
							正常
						</el-radio>
						<el-radio :value="2">
							暂停
						</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<!-- <el-form-item label="排序：" prop="sort">
					<el-input-number v-model="form.sort" style="width: 100%;" size="large" placeholder="请输入排序号" :min="0"
						controls-position="right" />
				</el-form-item> -->
			</el-form>

			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="dialogVisible = false, form = {} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<GetCoupon v-if="showGetCoupon" v-model="showGetCoupon" @changedata="changedata($event)" />
		<GetUser v-if="showGetUser" v-model="showGetUser" @changedata="changedatauser($event)" />

	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";

	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 24px;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>